<template>
    <div class="dashboardContainer" id="mainContent">
        <!-- vue-scroll一个vue的滚动插件 -->
        <vue-scroll
                :ops="ops"
            >
            <!-- 子layout的渲染组件 -->
            <WorkDashboard v-show="param.forEdit || activeTag.url=='index'" :param="themeDetails"></WorkDashboard>
            <!-- 消息组件，回收站，已读未读 -->
            <message-platform v-show="activeTag.url === 'message'" :key="'message'"> </message-platform>
            <!-- 使用v-if会导致从首页切换过来所有打开的页面再次重新加载，导致重复加载 -->
            <!-- 右侧除了index页面的ifream组件加载 -->
            <div class="workdashboard" v-show="activeTag.url!=='index'&&activeTag.url !== 'message'&&!param.forEdit">
                <div v-for="tag in tagList" v-show="tag.url === activeTag.url" style="height:100%;" :key="tag.url" >
                    <component :is="tag.component" v-if="!param.forEdit && tag.mounted" :param='tag'></component>
                </div>
            </div>
        </vue-scroll>
    </div>
</template>
<script>

import { createNamespacedHelpers } from 'vuex';
import WorkDashboard from './WorkDashboard';
import BusinessContainer from '../../builtInPage/businessContainer'; // 提前注入，需要加载标签页面时候引入，具体内容为ifream
import MessagePlatform from '~/components/builtInPage/MessagePlatform';

const { mapState:tagState } = createNamespacedHelpers('tagModule');
const { mapMutations, mapActions, mapState } = createNamespacedHelpers('homeModule');
    
export default {
    name: 'Dashboard',
    props:['param'],
    data() {
        return {
            dashboardShow:false,
            dashboard:{},
            ops: {
                rail: {
                    opacity: '0',
                },
                bar: {
                    onlyShowBarOnScroll: false,
                    background: '#c6c6c6',
                    size: '5px',
                },
            }
        };
    },
    computed: {
        ...tagState({
            activeTag:state => state.activeTag, // 当前标签的数据
            tagList: state => state.tagList, // 顶部比标签列表数据
        }),
        ...mapState({
            defaultTheme:state => state.defaultTheme,
            themeDetails: state => state.themeDetails
        })
    },
    components: {
        WorkDashboard,
        BusinessContainer,
        MessagePlatform,
    },
    created() {
        console.log(this.tagList);
        // 可编辑态
        console.log(this.activeTag);
        if(!this.param.forEdit){
            // 获取默认工作台
            this.getDefaultThemeAsync();
        }
    },
    methods: {
        ...mapMutations([
        ]),
        ...mapActions([
            'getDefaultThemeAsync'
        ]),
        
    }
};
</script>

<style scoped lang="scss">
    .dashboardContainer{
        width: 100%;
        height: 100%;
        
        // background-color: #f7f7f7;
        .workdashboard{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            bottom: 0;
        }
    }
</style>
